import pClose from '@/images/common/close1.png';
import { Image, Text, View, ScrollView } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React from 'react';
import { AtFloatLayout } from 'taro-ui';
import { connect } from 'react-redux';
import Icon from '@/components/Icon';
import { customeColor } from '@/src/config';
import 'taro-ui/dist/style/components/float-layout.scss';
import utils from '@/utils';
import './index.scss';

const ActivitySelect = ({
  dispatch,
  isOpened,
  merchantId,
  orgId,
  handleClose,
  manjian = {},
  couponList = [],
}) => {
  const goActivityPage = (activityId) => {
    Taro.navigateTo({
      url: `/giftCardSubPack/salesPromotion/index?id=${activityId}&merchantId=${merchantId}&orgId=${orgId}`,
    });
  };

  const handleGetCoupon = (item) => {
    dispatch({
      type: 'giftCard/createCoupon',
      payload: {
        sourceType: item.sourceType,
        id: item.id,
      },
    }).then(({ results, couponId } = {}) => {
      if (results) {
        return Taro.showToast({
          title: results,
          icon: 'none',
        });
      }

      const index = couponList.findIndex((obj) => {
        return obj.id === item.id;
      });

      if (index == -1) {
        return;
      }

      if (index != -1) {
        const temp = [...couponList];

        temp[index].isReceive = true;
        temp[index].couponId = couponId;

        dispatch({
          type: 'giftCard/setSelectProductCouponList',
          payload: { selectProductCouponList: temp },
        });
      }
    });
  };

  return (
    <View catchMove>
      <AtFloatLayout
        isOpened={isOpened}
        scrollY
        onClose={() => {
          handleClose();
        }}
        className="activitySelect"
      >
        <View className="activityContent">
          <View className="ncenter header">
            <View className="ncenter title">优惠</View>
            <View
              className="close flex-row-center-center"
              onClick={() => {
                handleClose();
              }}
            >
              <Image className="closeIcon" src={pClose} />
            </View>
          </View>
          <View className="headerDis"></View>
          {manjian.activityType == 2 && (
            <>
              <View className="label txt28 mt32">促销</View>
              <View
                className="item mt24 customePageStyleBg6 flex-row-spaceBetween-center"
                onClick={() => goActivityPage(manjian.activityId)}
              >
                <Text className="name customePageStyle">满减</Text>
                <View className="detail flex-column-center">
                  <Text className="txt24 txtDot cont">{manjian.content}</Text>
                  <Text className="txt20 gray time">
                    {manjian.startTime + '-' + manjian.endTime}
                  </Text>
                </View>
                <Icon name="a-icon_next_huaban7fuben5" size={18} color={customeColor} />
              </View>
            </>
          )}
          {couponList.length > 0 && (
            <>
              <View className="label txt28 mt32">可领优惠券</View>

              <ScrollView
                scrollY
                style={{
                  height: utils.getSizeByScale(877 - 82 - 40 - 32 - (Taro.$bottomHight ? 164 : 98)),
                }}
              >
                {couponList.map((item) => (
                  <View
                    className="item mt24 customePageStyleBg6 flex-row-spaceBetween-center"
                    key={item.id}
                  >
                    <View className="couponDetail flex-column-center">
                      <Text className="txt36 bold customePageStyle dis">
                        {item.discountAmount + (item.type <= 2 ? '元' : '折')}
                      </Text>
                      <Text className="txt20 gray tol">{'满' + item.minAmount + '元使用'}</Text>
                    </View>
                    <View className="couponInfo flex-column-center">
                      <Text className="txt28 couponname txtDot">{item.name}</Text>
                      <Text className="txt20 gray txtDot time">{item.timeString}</Text>
                    </View>
                    <View
                      className="btn customePageBackgroundStyle flex-row-center-center"
                      onClick={() => !item.isReceive && handleGetCoupon(item)}
                    >
                      {item.isReceive ? '已领取' : '立即领取'}
                    </View>
                  </View>
                ))}
              </ScrollView>
            </>
          )}
          <View className={Taro.$bottomHight ? 'lineEndH' : 'lineEnd'}></View>
          <View className="bottom">
            <View
              className="ncenter btn customePageBackgroundStyle"
              onClick={() => {
                handleClose();
              }}
            >
              确定
            </View>
            <View className={Taro.$bottomHight ? 'bottomH' : 'bottom0'}></View>
          </View>
        </View>
      </AtFloatLayout>
    </View>
  );
};

export default connect(() => {})(ActivitySelect);
